
import PubSub from 'pubsub-js';
import moment from 'moment';
import request from '../../utils/request';

//获取全局实例
const applnstance = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay:false, //音乐是否播放 
    song:{},//歌曲详情对象
    musicId:'', //音乐id
    musicLink:'',//音乐的链接
    currentTime:'00:00', //实时时长
    durationTime:'00:00',//总时长
    currentWidth:0, //实时进度条的宽度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  // options 用于接收路由跳转的query参数
  //原生小程序中路由传参，对参数的长度有限制，如果参数长度过长会自动截取掉
 //console.log(JSON.stringify(options.song))


  let musicId = options.musicId;  
  //id先更新到data中
  this.setData({
    musicId
  })
  //获取音乐详情
  this.getMusicInfo(musicId);

  /**
   * 问题： 如果用户操作的控制音乐播放/暂停的按钮，
   *       页面不知道，导致页面显示是否播放的状态和真是的音乐播放状态不一致。
   * 解决方案：
   *  1.通过控制音频的实例 backgroundAudioManager 去监视 播放/ 暂停
   */

   //怕暖当前页面音乐是否在播放
   if(applnstance.globalData.isMusicPlay && applnstance.globalData.musicId == musicId){
     //修改当前页面音乐播放状态为 true
     this.setData({
       isPlay:true
     })
   }
    //创建控制音乐播放的实例
      this.backgroundAudioManager = wx.getBackgroundAudioManager();
      //监听音乐播放/暂停
      this.backgroundAudioManager.onPlay(()=>{
        this.changePlayState(true);
        //修改全局音乐播放的状态
        applnstance.globalData.musicId = musicId;
      })
      this.backgroundAudioManager.onPause(()=>{
       this.changePlayState(false)
      })
      this.backgroundAudioManager.stop(()=>{
       this.changePlayState(false)
      })

      //监听音乐播放自然结束
      this.backgroundAudioManager.onEnded(() =>{
        //自动切换到下一首音乐，并且自动播放
        PubSub.publish('switchType','next')
        //将实时进度条的长度还原成 0 ：时间还原成 : 0
        this.setData({
          currentWidth:0,
          currentTime:'00:00'
        })
      })

      //监听音乐实时播放的进度
      this.backgroundAudioManager.onTimeUpdate(()=>{
        //格式化实时的播放时间
        let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss')
        let currentWidth = this.backgroundAudioManager.currentTime/this.backgroundAudioManager.duration * 450;
        this.setData({
          currentTime,
          currentWidth
        })
      })
  },
  //修改播放状态的功能函数
  changePlayState(isPlay){
    this.setData({ //修改音乐是否播放/暂停/停止 的状态
      isPlay
    })
    //修改全局音乐播放的状态
    applnstance.globalData.isMusicPlay = isPlay;
  },
    //获取 音乐详情的功能函数
    async getMusicInfo(musicId){
      let songData = await request('/song/detail',{ids:musicId});
      //调用时间  总时长 单位 ms
      let durationTime = moment(songData.songs[0].dt).format('mm:ss')
      this.setData({
      song:songData.songs[0],
      durationTime
      })
      //动态修改窗口名称标题
      wx.setNavigationBarTitle({
        title:this.data.song.name
      })
    }, 

    //点击播放/暂停 的回调
    handleMuusicPlay(){
      let isPlay = !this.data.isPlay;
      //修改是否播放的状态
      this.setData({
        isPlay
      })
      //调用musicId  musicLink
      let {musicId, musicLink} = this.data;
      this.musicControl(isPlay, musicId, musicLink);
    },

  //控制音乐播放暂停功能函数
   async musicControl(isPlay,musicId, musicLink){    
      if(isPlay){//音乐播放
        if(!musicLink){
          //获取音乐播放链接
          let musicLinkData = await request('/song/url', {id:musicId});
          musicLink = musicLinkData.data[0].url;
          this.setData({
            musicLink
          })
        }
        this.backgroundAudioManager.src = musicLink;
        this.backgroundAudioManager.title = this.data.song.name;
      }else{//暂停音乐
        this.backgroundAudioManager.pause();
      }
    },

    //点击切换的回调函数
    switchMusic(event){
      //获取切歌的类型
      let type = event.currentTarget.id;
      //关闭当前播放的音乐
      this.backgroundAudioManager.stop()

      // 发布消息数据给 recommendSong 页面
      PubSub.subscribe('musicId', (msg, musicId)=>{
        console.log(musicId)
        //获取音乐详情信息
        this.getMusicInfo(musicId);

        //自动播放当前切换的音乐
        this.musicControl(true, musicId);

        //取消订阅
        PubSub.unsubscribe('musicId')
      })

      // 发布消息数据给recommendSong 页面
      PubSub.publish('switchType',type);
    },

})